<template>
    <div class="swiper">
		<div class="swiper-container" id="swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(item,index) in imgs">
					<img class="banner" :src="item"/>
				</div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>
    </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
    name: 'swiper',
    props:['imgs'],
    data(){
    	return{
    		mySwiper:"",
    	}
    },
    mounted(){
    	this.mySwiper = new Swiper('.swiper-container', {
							loop: true,
							pagination: '.swiper-pagination',  // 分页器
							autoplay: 3000,
							paginationClickable: true,
							slidesPerView: 2,
							// spaceBetween: 5,
							effect: 'coverflow',
							centeredSlides: true,
						    coverflow: {
					            rotate: 60,
					            stretch:20,
					            depth: 30,
					            modifier: 1,
					            slideShadows : true
					        }
						});
    }
}
</script>

<style scoped>
.banner{
	height: 8rem;
}
  @media screen and (min-width:370px) and (max-width: 413px){
    .banner{
      height: 9rem;
    }
  }
  @media screen and (min-width:414px) and (max-width: 426px){
    .banner{
      height: 10rem;
    }
  }
</style>
